<template>
  <div class="container">
    <div class="lang-div">
      <button @click.stop="changeLang">切换语言</button>
      <span>当前语言： {{ lang }}</span>
    </div>
    <div class="inner-container">
      <div class="max-width900">
        <PcPolicyholder ref="policyholderRef" v-model="policyholderOption" />
      </div>
    </div>


    <div class="bottom-div">
      <el-button style="width: 100%;" type="primary" @click.stop="saveEvt">保存</el-button>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import i18n, { setLang } from '@/lang/pc/index' // i18n
import { policyholderOption } from './config.ts'; // 导入共享状态

const lang = ref(i18n.global.locale)

// 切换语言
const changeLang = () => {
  setLang(lang.value == 'zh-cn' ? 'en-us' : 'zh-cn')
  location.reload()
}

console.log(policyholderOption.value, 111)
const policyholderRef = ref()


// 保存，提交表单
const saveEvt = () => {
  console.log(policyholderOption.value, '投保人')
  // 校验投保人
  const policyholderFlag = policyholderRef.value.validParams()
  console.log(policyholderFlag, '投保人验证')
  if (!policyholderFlag) return

}

</script>

<style scoped>
@import url(./index.module.css);
</style>